<template>
  <div class="animated-banner">
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/0876da4f3ec73ff180fc87b46b6d1bcf4d52030a.png@1c.webp"
        data-height="281" data-width="3000" height="228" width="2438"
        style="height: 228.426px; width: 2438.71px; transform: translate(0px) rotate(0deg) scale(1); opacity: 1;"></div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/4adc24834b64143296d77bc81ccd952a59301b08.png@1c.webp"
        data-height="281" data-width="2444" height="228" width="1986"
        style="height: 228.426px; width: 1986.74px; transform: translate(0px) rotate(0deg) scale(1); opacity: 1;"></div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/e33992d2d75647af38c50792c199fb9db006786c.png@1c.webp"
        data-height="281" data-width="3000" height="228" width="2438"
        style="height: 228.426px; width: 2438.71px; transform: translate(24.3871px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/57102cf6e2e2845f2773581928c1d0f0c1985a3e.png@1c.webp"
        data-height="281" data-width="2749" height="195" width="1915"
        style="height: 195.794px; width: 1915.43px; transform: translate(-34.8387px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/0f79aa287163a3271c6cb22a73a6dc0fc210ab7c.png@1c.webp"
        data-height="135" data-width="150" height="94" width="104"
        style="height: 94.0645px; width: 104.516px; transform: translate(418.065px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/639de634f90688e86b7bd32924cfb029a316cde4.png@1c.webp"
        data-height="48" data-width="140" height="33" width="97"
        style="height: 33.4452px; width: 97.5484px; transform: translate(-278.71px, -41.8065px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/852c3bd9d9608ceccb7265de8cea7cf3a4b039eb.png@1c.webp"
        data-height="281" data-width="777" height="228" width="631"
        style="height: 228.426px; width: 631.626px; transform: translate(162.581px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/9556f65510f73c44aa6756ee9b8cf7fc2562b906.png@1c.webp"
        data-height="281" data-width="324" height="228" width="263"
        style="height: 228.426px; width: 263.381px; transform: translate(0px) rotate(0deg) scale(1); opacity: 1;"></div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/530a4624fe408881101885c6f24c72e8c2a14fb6.png@1c.webp"
        data-height="180" data-width="161" height="125" width="112"
        style="height: 125.419px; width: 112.181px; transform: translate(-104.516px, 13.9355px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/bf896616dec163402ec79a81f936af67932eca2f.png@1c.webp"
        data-height="106" data-width="2448" height="86" width="1989"
        style="height: 86.1677px; width: 1989.99px; transform: translate(-406.452px, 65.0323px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/32aa867cd3e8fba371a2be90d7d844a68c67f7a5.png@1c.webp"
        data-height="267" data-width="328" height="170" width="209"
        style="height: 170.535px; width: 209.497px; transform: translate(-191.613px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/c6263485a0218c887848c47a0fe4f515006e1567.png@1c.webp"
        data-height="268" data-width="345" height="186" width="240"
        style="height: 186.735px; width: 240.387px; transform: translate(-418.065px, 13.9355px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/cd4fda9478b06a8d81cd04f69d7a2ad475d1db40.png@1c.webp"
        data-height="105" data-width="2750" height="73" width="1916"
        style="height: 73.1613px; width: 1916.13px; transform: translate(-153.29px, 62.7097px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/0479542df6a7c5deddf60fbbf63b6e1f1f770c08.png@1c.webp"
        data-height="269" data-width="428" height="187" width="298"
        style="height: 187.432px; width: 298.219px; transform: translate(209.032px, 13.9355px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/b6f4359409b4550fb38594d8c227902db29c720a.png@1c.webp"
        data-height="281" data-width="3000" height="277" width="2961"
        style="height: 277.374px; width: 2961.29px; transform: translate(-98.7097px, -4.93548px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/8a6899088fc9dcd37a0039884fb77f69dc3b1c30.png@1c.webp"
        data-height="281" data-width="626" height="261" width="581"
        style="height: 261.058px; width: 581.574px; transform: translate(-1672.26px) rotate(0deg) scale(1); opacity: 1;">
    </div>
    <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/96704a6197153e1717a910e6c227937f34743cee.png@1c.webp"
        data-height="281" data-width="681" height="195" width="474"
        style="height: 195.794px; width: 474.503px; transform: translate(1741.94px) rotate(0deg) scale(1); opacity: 1;">
    </div>
  </div>
</template>

<script>
import * as Three from 'three'
import * as Stats from 'stats.js'
// 导入轨道控制器
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
// import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'
let scene = null,
  camera = null,
  renderer = null,
  mesh = null
export default {
  data () {
    return {

    };
  },
  methods: {
    init () {
      // 场景-----------------------
      var scene = new Three.Scene();
      //  --------------------------

      //  摄像机---------------------
      var camera = new Three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.x = -30;
      camera.position.y = 40;
      camera.position.z = 30
      camera.lookAt(scene.position);
      //  --------------------------

      // 渲染器--------------------
      var renderer = new Three.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 设置渲染器渲染阴影效果
      renderer.setClearColor(new Three.Color(0x000000));
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.shadowMap.enabled = true;
      // 渲染器 end----------------

      // 坐标轴--------------------
      var axes = new Three.AxesHelper(20);
      scene.add(axes);
      // -------------------------

      // 平面---------------------
      var planeGeometry = new Three.PlaneGeometry(60, 20, 1, 1);
      var planeMaterial = new Three.MeshLambertMaterial({ color: 0xcccccc });
      var plane = new Three.Mesh(planeGeometry, planeMaterial);
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.x = 15
      plane.position.y = 0
      plane.position.z = 0
      scene.add(plane);

      // 设置投影
      plane.receiveShadow = true;
      // --------------------------

      //  物体----------------------
      var geometry = new Three.BoxGeometry(4, 4, 4);
      var material = new Three.MeshLambertMaterial({ color: 0x00ff00 });
      var cube = new Three.Mesh(geometry, material);
      cube.position.x = 0;
      cube.position.y = 2;
      cube.position.z = 0;

      // 设置投影
      cube.castShadow = true;
      scene.add(cube);
      // 物体 end ------------------

      // 光源-----------------------
      var spotLight = new Three.SpotLight(0xffffff);
      spotLight.position.set(-40, 60, -10);
      scene.add(spotLight);

      // 设置投影
      spotLight.castShadow = true;
      // 光源 end -------------------

      // 状态监视器-------------------
      var stats = new Stats();
      stats.showPanel(0);
      document.body.appendChild(stats.dom);
      // 状态监视器 end --------------

      renderer.render(scene, camera);

    },
    animate () {
      // 浏览器自动渲染下一帧
      requestAnimationFrame(this.animate);


    }
  },
  mounted () {
    this.init()
    this.animate()
  }

}

</script>
<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>